/* 版心 */
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #22252C;
}

.wrapper {
    margin: 20px auto;
    width: 1700px;
}

li {
    list-style: none;
}

.wrapper div {
    background-color: #33373f;
    border-radius: 10px;
}

/* 对头部盒子进行装饰 */
.header {
    margin-top: 30px;
    height: 150px;

}

.headerUl {
    display: flex;
    justify-content: space-between;
}

.headerUl li {
    width: 340px;
    height: 150px;
    background-color: #33373f;
    margin-right: 30px;
    border-radius: 10px;
}

.headerUl li:last-child {
    margin-right: 0;
}

/* 设置每个li的图标 */
.headerUl .overhead {
    background-image: url("../images/overhead.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 90% center;

}

.headerUl .trend {
    background-image: url("../images/trend.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 90% center;

}

.headerUl .income {
    background-image: url("../images/income.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 90% center;

}

.headerUl .debt {
    background-image: url("../images/debt.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 90% center;

}

.headerUl .status {
    background-image: url("../images/status.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 90% center;

}

/* 设置每个li中的内容装饰 */
.headerUl h3 {
    margin-left: 40px;
    margin-top: 25px;
    font-size: 26px;
    color: #fff;
}

.headerUl h2 {
    color: #e3c191;
    margin-left: 50px;
    margin-top: 15px;
    font-size: 35px;
}

/* 对柱状图容器进行装饰 */
.middle {
    margin-top: 20px;
    /*margin: left auto;*/
    height: 510px;
}

/* 中间盒子部分 */
.middle {
    display: flex;
}

.middle .left {
    flex: 1;
    margin-right: 20px;
}

.middle .right {
    flex: 1;
}

/* 底部盒子部分装饰 */

.bottom {
    display: flex;
    height: 400px;
    color: #fff;
}

.bottom div {
    margin-right: 20px;
}

.bottom div:last-child {
    margin-right: 0;
}

.bottom .costDetail {
    flex: 1;
}

.bottom .detailBar {
    flex: 1;
}

.bottom .detailPie {
    flex: 1;
}